<template>
  <div>
    <!--  头部区域  -->
    <div style="width: 100%; height: 214px">
      <div style="background-color: #409EFF; display: flex; flex-direction: column; justify-content: center; align-items: center;" >
        <div>
          <img v-if="data.user?.avatar" style="width: 150px; height: 150px;border-radius: 50%; padding: 20px" :src="data.user?.avatar" alt="">
        </div>
        <div>
          <div style="color: white; font-size: 30px; padding-bottom: 20px">{{ data.user.name }}</div>
        </div>
      </div>
    </div>

    <!--  操作栏区域  -->
    <div style="width: 100%; min-height: calc(100vh - 55px - 214px); background-color: #e1e5ef;">
      <div style="padding-top: 10px">
        <div class="card" style="margin: 0 10px">
          <div  @click="handleAdd" style="height: 65px; padding:0 5px; display: flex; justify-content: space-between; align-items: center">
            <div>个人信息</div>
            <el-icon><ArrowRight /></el-icon>
          </div>
          <div style="height: 65px; padding:0 5px; display: flex; justify-content: space-between; align-items: center" @click="data.FormVisible2 = true">
            <div>修改密码</div>
            <el-icon><ArrowRight /></el-icon>
          </div>
          <div @click="logout" style="height: 65px; padding:0 5px; display: flex; justify-content: space-between; align-items: center">
            <div>退出登录</div>
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
    </div>


    <!-- 底部区域开始 -->
    <div style=" position: fixed; bottom: 0; left: 0; right: 0;
                 height: 55px; background-color: #2c82ff; z-index: 1000;">
      <div style="height: 100%; display: flex; justify-content: space-around; align-items: center;">
        <div v-if="data.user.role === 'USER'" style="color: white; display: flex; flex-direction: column; align-items: center;" @click="router.push('/mobileHome')">
          <el-icon size="25"><HomeFilled /></el-icon>
          首页
        </div>
        <div v-else style="color: white; display: flex; flex-direction: column; align-items: center;" @click="router.push('/mobileAdmin')">
          <el-icon size="25"><HomeFilled /></el-icon>
          首页
        </div>
        <div style="color: #ffd04b; display: flex; flex-direction: column; align-items: center;">
          <el-icon size="25"><UserFilled /></el-icon>
          个人中心
        </div>
      </div>
    </div>
    <!-- 底部区域结束 -->

    <!--  个人信息弹窗  -->
    <el-dialog v-model="data.FormVisible" title="个人信息" width="400" style="--el-dialog-margin-top:5vh" destroy-on-close>
      <el-form ref="fromRef" :model="data.user" label-width="100px" style="padding: 20px 30px 10px 0;">
        <el-form-item prop="avatar">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/files/upload"
              :show-file-list="false"
              :headers="{ token: data.user.token }"
              :on-success="handleAvatarSuccess"
              list-type="picture"
          >
            <img width="200" v-if="data.user?.avatar" :src="data.user?.avatar" class="avatar"  alt=""/>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item prop="username" label="账号" >
          <el-input v-model="data.user.username" placeholder="请输入账号" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="name" label="用户名">
          <el-input v-model="data.user.name" placeholder="请输入用户名" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="data.user.phone" placeholder="请输入手机号" autocomplete="off" />
        </el-form-item>
        <el-form-item v-if="data.user.role === 'USER'" prop="address" label="地址">
          <el-input v-model="data.user.address" placeholder="请输入地址" autocomplete="off" />
        </el-form-item>
        <el-form-item v-else prop="email" label="邮箱">
          <el-input v-model="data.user.email" placeholder="请输入邮箱" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" style="padding: 10px 20px" @click="update">保存</el-button>
        <el-button style="padding: 10px 20px" @click="data.FormVisible = false">返回</el-button>
      </div>
    </el-dialog>

    <!--  修改密码弹窗  -->
    <el-dialog v-model="data.FormVisible2" title="个人信息" width="400" style="--el-dialog-margin-top:5vh" destroy-on-close>
      <div style="font-size: 16px">修改密码</div>
      <el-form ref="formRef" :rules="data.rules" :model="data.user" label-width="80px" style="padding: 20px 30px 10px 0">
        <el-form-item prop="password" label="原密码">
          <el-input show-password v-model="data.user.password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码">
          <el-input show-password v-model="data.user.newPassword" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="new2Password" label="确认密码">
          <el-input show-password v-model="data.user.new2Password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码" />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <div style="text-align: center">
          <el-button type="primary" style="padding: 10px 20px" @click="updatePassword">保存</el-button>
          <el-button style="padding: 10px 20px" @click="data.FormVisible2 = false">返回</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import router from "@/router/index.js";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}"),
  FormVisible: false,
  FormVisible2: false,
  rules: {
    password: [
      { required: true, message: '请填写原密码', trigger: 'blur' }
    ],
    newPassword: [
      { required: true, message: '请填写新密码', trigger: 'blur' }
    ],
    new2Password: [
      { required: true, message: '请确认新密码', trigger: 'blur' }
    ],
  },
})

const formRef = ref()

const logout = () => {
  localStorage.removeItem('code_user')
  router.push('/login')
}

const handleAdd = () => {
  data.FormVisible = true;
  data.form = {};
};

const handleAvatarSuccess = (res) => {
  data.user.avatar = res.data
}

const emit = defineEmits(['updateUser'])

const update = () => {
  let url
  if (data.user.role === 'ADMIN'){
    url = '/admin/update'
  }
  if (data.user.role === 'USER'){
    url = '/user/update'
  }
  request.put(url, data.user).then(res => {
        if (res.code === '200'){
          ElMessage.success('更新成功')
          localStorage.setItem('code_user', JSON.stringify(data.user))
          emit('updateUser')
        }
      }
  )
}

const updatePassword = () => {
  formRef.value.validate(valid => {
    if (valid) {
      request.post('/updatePassword', data.user).then(res => {
        if (res.code === '200') {
          ElMessage.success('修改成功')
          setInterval(() => {
            localStorage.removeItem('code_user')
            location.href = '/login'
          }, 500)
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

</script>

<style scoped>

</style>

